<template>    
    <div v-if="isVertical" class="video" @click="handleClick">
        <cover-image class="video-cover" :src="pic">
            <slot name="coverContent">
                <div class="count">
                    <span><i class="fa fa-bofangshu"></i>{{formatPlay}}</span>
                    <span><i class="fa fa-danmushu"></i>{{formatDanmaku}}</span>
                </div>
            </slot>
        </cover-image>
        <div class="title">{{title}}</div>
    </div>
    <div v-else class="video-horizontal" @click="handleClick">
        <div class="video-cover">
            <cover-image :src="pic">
                <div class="duration">
                    <span>{{formatDuration}}</span>                    
                </div>
            </cover-image>
        </div>
        <div class="content">
            <div class="title" v-html="title"></div>
            <div v-if="author" class="author">
                <i class="fa fa-up-zhu"></i>{{ author }}
            </div>
            <div class="count">
                <span><i class="fa fa-bofangshu"></i>{{formatPlay}}</span>
                <span><i class="fa fa-danmushu"></i>{{formatDanmaku}}</span>
            </div>
        </div>
    </div>
</template>

<script>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import CoverImage from '@/components/CoverImage'
import { formatNumber, formatTime } from '@/utils'
export default {
    name: 'VideoCover',
    components: {
        CoverImage
    },
    props: {
        // 视频bvid
        bvid: {
            type: String
        },
        // 封面图片地址
        pic: {
            type: String
        },
        title: {
            type: String
        },
        // 播放数
        play: {
            type: Number,
            default: 0
        },
        // 弹幕数
        danmaku: {
            type: Number,
            default: 0
        },
        // 布局
        direction: {
            type: String,
            default: 'vertical'
        },
        // 作者
        author: {
            type: String
        },
        // 时长
        duration: {
            type: [Number, String]
        }
    },
    setup(props) {        
        const isVertical = computed(() => {
            const directions = ['vertical', 'horizontal']
            const matchDirection = directions.includes(props.direction) ? props.direction : 'vertical'
            return matchDirection === 'vertical'
        })
        const formatPlay = computed(() => formatNumber(props.play))
        const formatDanmaku = computed(() => formatNumber(props.danmaku))
        const formatDuration = computed(() => formatTime(props.duration))
        const router = useRouter()
        const handleClick = () => {            
            router.push({
                name: 'video',
                params: {
                    bvid: props.bvid
                }
            })
        }
        return {
            isVertical,
            formatPlay,
            formatDanmaku,
            formatDuration,
            handleClick
        }
    }
}
</script>

<style lang="scss" scoped>
    .video {
        &-cover {
            border-radius: 2px;
        }
        .count {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            font-size: 12px;
            padding: 5px 6px;        
            color: $color-white;        
            background: linear-gradient(0deg,rgba(0,0,0,.85), transparent);
            span {
                display: inline-flex;
                align-items: center;
            }
            .fa {
                margin-right: 5px;
                font-size: 14px;
            }
        }
        .title {
            margin-top: 6px;
            color: $color-text-primary;
            font-size: 12px;
            @include max-lines(2);        
        }
        &-horizontal {
            display: flex;
            padding: 5px;
            .video-cover {
                width: 140px;
            }
            .duration {
                position: absolute;
                right: 4px;
                bottom: 4px;
                color: $color-white;
                font-size: 12px;
                padding: {
                    left: 2px;
                    right: 2px;
                };
                background-color: rgba(0,0,0,.5);
            }
            .content {
                flex: 1;
                display: flex;
                flex-direction: column;
                margin-left: 10px;
                font-size: 12px;
                color: $color-text-secondary;
                .fa{
                    margin-right: 5px;
                }
            }
            .title {
                color: #222;
                font-size: 14px;
                @include max-lines(2);
                margin-bottom: 5px;
                :deep .keyword {
                    color: $theme-color;
                    font-style: normal;
                }
            }
            .author {
                display: flex;
                align-items: center;
                margin-bottom: 4px;
            }
            .count{
                display: flex;
                align-items: center;
                span:first-child {
                    margin-right: 10px;
                }
            }
        }
    }
</style>